<template>
  <div>
    <Top></Top>
    <el-row>
      <!-- span:占多少栏   offset：向右便宜多少栏 -->
      <el-col :span="16"
              :offset="4">
        <el-table ref="multipleTable"
                  :data="carts"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55" align="center">
          </el-table-column>
          <el-table-column label="图片"
                           width="120" align="center">
                           <!-- 如果想要在el-table-column的子标签获取到属性值，必须通过插槽方式获取 
                            scope里面封装carts数组对象   row代表当前行的元素（数组中的某个元素）
                           -->
            <template slot-scope="scope">
              <img :src="$imgPrefix + scope.row.image" width="80px" height="80px"/>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="商品名字"
                           width="340" align="center">
          </el-table-column>
          <el-table-column prop="price"
                           label="单价" align="center">
          </el-table-column>
          <el-table-column label="数量" width="200" align="center">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.num" :min="1" :max="scope.row.stock" size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计" align="center">
            <template slot-scope="scope"> {{(scope.row.price * scope.row.num).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column 
                           label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5,10]"
            :page-size="size"
            layout="prev, pager, next, jumper, total, sizes"
            :total="total">
          </el-pagination>
        </el-row>

        <el-row>
          <el-col :span="6" :offset="18" style="text-align: right">
            <span class="price">{{getTotalPrice()}}</span>
            <el-button type="success" size="mini" @click="goPay">去结算</el-button>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
    <Footer></Footer>
  </div>
</template>
<script>
import Top from './commons/top.vue'
import Footer from './commons/footer.vue'
export default {
  data() {
    return {
      
      page: 1,
      size: 5,
      total: 0,
      totalPage: 0,
      carts: [],
      multipleSelection: []
    }
  },
  components: {
    // 2.注册
    Top,
    Footer,
  },
  mounted() {
    this.getData()
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getData()
    },
    getData(){
      this.$axios
      .get('/cart/findByPage/' + this.page + '/' + this.size)
      .then((res) => {
        // res.data   response result
        // res.data.data respage
        // res.data.data.data list
        let resPage = res.data.data
        //
        this.page = resPage.curPage
        this.total = resPage.total
        this.totalPage = resPage.totalPage
        this.carts = resPage.data
      })
    },
    del(id){
      this.$axios.delete("/cart/delById/" + id).then(res =>{
        if(res.data.code == 200){
          this.$message.success("删除成功")
          this.getData()
        }
      })
    },
    getTotalPrice(){
      let total = 0
      for (const cart of this.multipleSelection) {
        total = total + cart.num * cart.price
      }
      return total
    },
    goPay(){
      if(this.multipleSelection.length == 0){
        this.$message.warning("请至少勾选一件商品")
        return
      }
      // 如果传的参数是对象、数组，push用路由的名字进行跳转，参数都放在params对象中
      // this.$router.push({
      //   name: "OrderConfirm",
      //   params:{
      //     carts: this.multipleSelection
      //   }
      // })
      sessionStorage.setItem("carts",JSON.stringify(this.multipleSelection))
      this.$router.push("/orderConfirm")
    }
  }
}
</script>

<style scoped>
.price{
  color: red;
  font-size: 30px;
}
</style>